<template>
  <div>
    <nut-address existAddressTitle="配送至"
        v-model="showPopupOther"
        type="exist"
        :existAddress="existAddress"
        :province="province"
        :city="city"
        :country="country"
        :town="town"
        customAndExistTitle="选择其他地址"
        @onChange="onChange4"
        @close="close4"
        @selected="selected4"
        @switchModule="switchModule"
        @closeMask="closeMask">
    </nut-address>

    <nut-popup position="bottom" closeable close-icon="circle-cross" v-model="addressN" :style="{ height: '50%',borderRadius: '20px 20px 0 0'}" close-icon-position="top-right">
      <div class="title">
        <span>配送至</span>
      </div>
      <div class="addressMain">
        <nut-textinput style="margin-bottom: 10px" v-model="address.addressee" placeholder="姓名" :clearBtn="true" :disabled="false"/>
        <nut-textinput style="margin-bottom: 10px" v-model="address.addresseephone" placeholder="收货人联系方式" :clearBtn="true" :disabled="false"/>
        <span style="font-size: 14px;padding: 0 30px 0 10px;color: #b4b4b4">详细地址</span>
        <nut-textbox place-text="" :switch-max="true" :max-num="50" :txt-areaH="100" v-model="address.addressees"></nut-textbox>
      </div>

      <div class="addressFooter">
        <nut-button @click="newAddress" block shape="circle">
          确定
        </nut-button>
      </div>
    </nut-popup>

  </div>
</template>

<script scoped>

import districts from "../plugins/districts";
import axios from "../../node_modules/axios"

export default {
  name: "SelectAddress",
  props: {
    title: {
      type: String,
      default: '选择位置'
    },
    state: {
      type: Number,
      default: -1
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      addressN: false,
      showPopupOther: false,
      existAddress: [],
      province: [], // 省
      city: [],// 市
      country: [],// 县
      town: [], //镇
      text2: '',
      text1: '',
      select: -1,
      cityIndex: 1,
      address: {
        "id": -1,
        "userId": this.$cookies.get('userid'),
        address: "", //地址
        "addressee": "", //收获人
        "addressees": "",
        "addresseephone": '',
        "remarks": ""
      },
      addAddress: {
        "userId": this.$cookies.get("userid"),
        "address": "",
        "addressee": "",
        "addresseephone": "",
        "remarks": ""
      },
    }
  },
  methods: {
    showAddressOther() {
      this.showPopupOther = true
    },
    onChange4(cal) {
      if (this.cityIndex == 1) {
        this.city = this.getKeyOrValue(districts[cal.value.id]);
        this.cityIndex = 2;
        this.$forceUpdate();
      } else if (this.cityIndex == 2) {
        this.country = this.getKeyOrValue(districts[cal.value.id])
        this.cityIndex = 1;
        this.$forceUpdate();
      }
      if (this[cal.next].length < 1) {
        this.addressN = true;
        this.cityIndex = 1;
      }
    },
    close4(val) {
      console.log(val);
      if (val.type == 'exist') {
        this.address.addressee = val.data.name;
        this.address.address = val.data.provinceName + " " + val.data.cityName + " " + val.data.countyName + " " + val.data.townName;
        this.address.addresseephone = val.data.phone;
        this.address.addressees = val.data.addressDetail;
        this.address.id = val.data.id;
        this.address.remarks=val.data.remarks;
        this.$emit('func', this.address);
      } else {
        this.address.address = val.data.addressStr
        let addText = '';
        addText += val.data.province.name + ' ';
        addText += val.data.city.name + ' ';
        addText += val.data.country.name;
        this.address.address = addText;
        this.addAddress.addressee = this.address.addressee;
        this.addAddress.address = addText + " " + this.address.addressees;
        this.addAddress.addresseephone = this.address.addresseephone;

        this.addAddress.userId = this.$cookies.get("userid");

        axios.post("/address/save", this.addAddress).then(
            res => {
              if (res.data.code == 200) {
                const address = res.data.data;
                const addressee = address.address.split(" ")
                const newAddress = {
                  "id": address.id,
                  "addressDetail": addressee[3],
                  "cityName": addressee[1],
                  "remarks": "",
                  "countyName": addressee[2],
                  "provinceName": addressee[0],
                  "selectedAddress": false,
                  "townName": "",
                  "name": address.addressee,
                  "phone": address.addresseephone
                };
                console.log(newAddress);
                this.existAddress.push(newAddress)

                const data = {
                  type: "exist",
                  data: newAddress
                }
                this.close4(data);
              }
            }
        )


      }
      this.address = {
        "address": "", //地址
        "addressee": "", //收获人
        "addresseephone": '',
        "remarks": "",
      }
    },
    selected4(prevExistAdd, nowExistAdd, arr) {
      this.text2 = '';
    },
    switchModule(cal) {
      if (cal.type == 'custom') {
        //console.log('点击了“选择其他地址”按钮')
      } else {
        //console.log('点击了自定义地址左上角的返回按钮')
      }
    },
    closeMask(val) {
      //console.log('那个步骤的关闭', val)
    },
    getKeyOrValue(object) {
      let re = [];
      for (let props in object) {
        let i = {'id': props, 'name': object[props]}
        re.push(i)
      }
      return re;
    },
    newAddress() {
      this.addressN = false;
      this.showPopupOther = false;
    },
    getAllAddress() {
      this.existAddress = [];
      const param = new URLSearchParams();
      param.append("userId", this.$cookies.get('userid'));
      axios.get("/address/getUserAddress", {params: param}).then(
          res => {
            let def = this.$cookies.get("addressId");
            for (let i = 0; i < res.data.data.length; i++) {
              const address = res.data.data[i];
              const addressee = address.address.split(" ")
              const newAddress = {
                "id": address.id,
                "addressDetail": addressee[3],
                "cityName": addressee[1],
                "remarks": address.remarks,
                "countyName": addressee[2],
                "provinceName": addressee[0],
                "selectedAddress": false,
                "townName": "",
                "name": address.addressee,
                "phone": address.addresseephone
              };
              if (address.id == def) {
                console.log(address.id);
                this.address.address = address;
                this.address.addressees = address.addressee
                const data = {
                  type: "exist",
                  data: newAddress
                }
                this.close4(data)
                this.$emit('def', def);
              }
              this.existAddress.push(newAddress)
            }
          }
      )
    }
  },
  watch: {
    state() {
      this.showPopupOther = true;
      //this.getAllAddress();
    },
    showPopupOther() {
    }
  },
  mounted() {
    this.province = this.getKeyOrValue(districts["100000"]);
    this.getAllAddress();
  },
  created() {

  }
}
</script>

<style scoped>
>>> .nav-title {
  font-weight: normal;
}

.title {
  text-align: center;
  margin-top: 20px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 20px;

}

>>> .nut-textbox .txt-area textarea {
}

>>> .txt-area {
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #dddfe6;
  font-size: 14px;
}


.addressMain {
  margin-top: 20px;
  padding: 10px;
}

.addressFooter {
  position: absolute;
  bottom: 2px;
  padding: 10px;
  width: 94.5%;

}


.other {
  background: white;
  border-radius: 0 0 13px 13px;
  display: flex;
  align-items: center;
  padding: 4px;
  font-size: 13px;
  font-weight: normal;
  height: 7vh;
}


>>> .nut-checkbox input {
  border-radius: 15px;
}

>>> .nut-checkbox.nut-checkbox-size-base .nut-checkbox-label {
  font-size: 10px;
}

.titile {
  margin: 0 10px;
}

.carGoods {
  background: white;
  height: 20vh;
  margin: 1vh 0;
  border-radius: 13px;
}

.bottomQ {
  position: absolute;
  bottom: 70px;
  width: 100vw;
  background: #ffffff;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}


>>> .nut-icon-circle-cross {
  width: 18px;
  height: 18px;
  transform: scale(1.5);
  margin: 8px;
}

</style>